import React from 'react';
import PropTypes from 'prop-types';
import { DatePicker, Select } from 'antd';
import moment from 'moment';

const MonthPicker = DatePicker.MonthPicker;
const Option = Select.Option;

class SelectTime2 extends React.Component {
  constructor(props) {
    super(props);
    const value = props.value || props.defaultValue || {};
    this.state = {
      timeUnit: value.timeUnit || '日',
      startTime: value.startTime || null,
      endTime: value.endTime || null,
    };
    this.startTime = ''; // input框显示的值(相对于startTime有默认时间)
    this.endTime = '';
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.value) {
      this.setState({
        timeUnit: nextProps.value.timeUnit,
        startTime: nextProps.value.startTime,
        endTime: nextProps.value.endTime,
      });
    }
  }
  // 切换日月年
  onTypeChange = (value) => {
    // 没有传value就 自己控制,去setState
    if (!this.props.value) {
      this.setState({
        timeUnit: value,
      });
    }
    this.props.onChange({
      timeUnit: value,
      startTime: this.startTime,
      endTime: this.endTime,
    });
  };
  // 设置开始时间
  getStartTime = date => {
    // 年的切换 date为'2017',月和日的切换date为object
    let startTime = date;
    if (typeof startTime === 'string') {
      startTime = moment(startTime);
    }
    if (startTime.isBefore(this.state.endTime)) {
      this.isValue(startTime, this.endTime);
    } else {
      this.isValue(this.endTime, startTime);
    }
  };
  // 设置结束时间
  getEndTime = date => {
    let endTime = date;
    if (typeof endTime === 'string') {
      endTime = moment(endTime);
    }
    if (this.state.startTime.isBefore(endTime)) {
      this.isValue(this.startTime, endTime);
    } else {
      this.isValue(endTime, this.startTime);
    }
  };
  // 判断是否传入value，没有传入就自己控制去控制，setState
  isValue = (startTime, endTime) => {
    if (!this.props.value) {
      this.setState({
        startTime,
        endTime,
      }, () => {
        this.props.onChange({
          timeUnit: this.state.timeUnit,
          startTime,
          endTime,
        });
      });
    } else {
      this.props.onChange({
        timeUnit: this.state.timeUnit,
        startTime,
        endTime,
      });
    }
  }
  render() {
    let timeComp = null;
    const selectOption = this.props.selectOptions.map(elem => {
      return <Option key={elem}>{elem}</Option>;
    });

    const { startTime, endTime } = this.state;

    switch (this.state.timeUnit) {
      case '日':
        // 如果传了value  defaultValue参数就失效了 所以可以直接用value的值
        this.startTime = startTime || moment().subtract(1, 'days');
        this.endTime = endTime || moment();
        timeComp = (
          <span>
            <DatePicker
              value={this.startTime}
              style={{ width: '160px', marginTop: '5px' }}
              onChange={this.getStartTime}
              size={this.props.size}
            />
            {/*<DatePicker
              value={this.endTime}
              style={{ width: '160px', marginTop: '5px' }}
              onChange={this.getEndTime}
              size={this.props.size}
            />*/}
          </span>
        );
        break;
      case '月':
        this.startTime = startTime || moment().startOf('month');
        this.endTime = endTime || moment().endOf('month');
        timeComp = (
          <span>
            <MonthPicker
              value={this.startTime}
              style={{ width: '160px', marginTop: '5px' }}
              onChange={this.getStartTime}
              size={this.props.size}
            />
           {/* <MonthPicker
              value={this.endTime}
              style={{ width: '160px', marginTop: '5px' }}
              onChange={this.getEndTime}
              size={this.props.size}
            />*/}
          </span>
        );
        break;
      case '年': {
        const yearNow = moment()
          .startOf('year')
          .format('YYYY');
        let i = 0;
        const options = [];
        while (i < 20) {
          const year = yearNow - i;
          options.push(<Option key={year}>{year}</Option>);
          i++;
        }
        this.startTime = startTime || moment(`${yearNow - 5}`);
        this.endTime = endTime || moment().startOf('year');;
        timeComp = (
          <span>
            <Select
              value={this.startTime.format('YYYY')}
              style={{ width: '160px', marginTop: '5px' }}
              onChange={this.getStartTime}
              size={this.props.size}
            >
              {options}
            </Select>
           {/* <Select
              value={this.endTime.format('YYYY')}
              style={{ width: '160px', marginTop: '5px' }}
              onChange={this.getEndTime}
              size={this.props.size}
            >
              {options}
            </Select>*/}
          </span>
        );
        break;
      }
      default:
        break;
    }
    return (
      <span
        style={this.props.style || {}}
        className={this.props.className  || ''}
      >
        <span>
          <Select
            value={this.state.timeUnit}
            style={{ width: '60px' }}
            onSelect={this.onTypeChange}
            size={this.props.size}
          >
            {selectOption}
          </Select>
        </span>
        <span style={{ marginLeft: '10px' }}>时间：{timeComp}</span>
      </span>
    );
  }
}
/**
 * 时间选择组件
 * @prop {function} onChange -修改日期事件
 * @prop {{timeUnit: string, startTime: moment, endTime: moment}} defaultValue -组件默认值
 * @prop {{timeUnit: string, startTime: moment, endTime: moment}} value -组件默认值
 * @prop {string} [size='default'] - 选择框大小，可选 large small
 */
SelectTime2.propTypes = {
  onChange: PropTypes.func,
  defaultValue: PropTypes.object,
  value: PropTypes.object,
  size: PropTypes.string,
  selectOptions: PropTypes.array,
};
SelectTime2.defaultProps = {
  onChange: () => null,
  size: 'default',
  defaultValue: null,
  value: null,
  selectOptions: ['日','月','年'],
};

export default SelectTime2;